<template>
	<view class="content" :data-theme="theme">
		<checkbox-group v-model="checkboxValue" @change="checkboxChange">
			<view class="card" v-for="(item,index) in applyData" :key="index">
				<view class="card-top" style="display: flex;margin: 20rpx 0;font-weight: bold;position: relative;">
					<view class="content-left1">
						租借单号：<span>{{item.id}}</span>
					</view>
					<view class="content-right" style="right: 0%;position: absolute;">
						{{rentStateFliter[item.rentState]}}
					</view>
				</view>

				<view class="item-contnet">
					<view class="content-left">
						管理城市
					</view>
					<view class="content-right">
						{{item.operatyCity}}
					</view>
				</view>

				<view class="item-contnet">
					<view class="content-left">
						仓库
					</view>
					<view class="content-right">
						{{item.depotName}}
					</view>
				</view>
				<view class="item-contnet">
					<view class="content-left">
						实际退回数量
					</view>
					<view class="content-right">
						100
					</view>
				</view>
				<!-- <view class="item-contnet">
					<view class="content-left">
						实际退回押金
					</view>
					<view class="content-right">
						{{item.actualDeposit}}
					</view>
				</view> -->

				<!-- <view class="item-contnet">
					<view class="content-left">
						申请时间
					</view>
					<view class="content-right">
						{{item.applyTime}}
					</view>
				</view> -->
				<view class="item-contnet">
					<view class="content-left">
						创建人
					</view>
					<view class="content-right">
						{{item.creator}}
					</view>
				</view>
				<view class="item-contnet">
					<view class="content-left">
						更新时间
					</view>
					<view class="content-right">
						{{item.updateTime}}
					</view>
				</view>
				<!-- <view class="item-contnet">
					<view class="content-left">
						最近更新人
					</view>
					<view class="content-right">
						{{item.lastUpdated}}
					</view>
				</view> -->
				<view style="margin:15rpx 0px 10rpx 0px;border-bottom: 1px solid #ddd"></view>
				<view class="footer-button">
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex; flex-flow: row;justify-content: space-between;text-align: center;align-items: center;">
						<view>
							<checkbox :value="item.id.toString()" :checked="item.checked" />
						</view>
						<view class="last_button" style="display: flex;justify-content: end;font-size: 24rpx;">
							<button style="line-height: 57rpx;padding:0 30rpx;" class="plain_bgColor" plain="true"
								@click="returnMaterials(item)">申请退租</button>
						</view>
					</label>

				</view>
			</view>
		</checkbox-group>
		<view class='noCommodity' v-if="applyData.length == 0 ">
			<view class='pictrue'>
				<!-- <image src='../static/noCollect.png'></image> -->
				<image src='../../static/noCollect.png'></image>
			</view>
			<text class="text-ccc" style="font-weight: bolder;">暂无信息</text>
		</view>
		<uni-load-more v-else :status="loadMoreStatus"></uni-load-more>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from '@/utils/setTheme';
	let app = getApp();
	export default {
		props: {

			applyData: {
				type: Array,
				default: ''
			},
			// tabIndex: {
			// 	type: Number,
			// 	default: 0
			// },
			loadMoreStatus:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				tabList: [{
					materialName: '物资名称1',
					materialsku: '3000L/桶',
					depotName: '大兴1仓',
					materialCode: 'BM13334324324',
					operatyCity: '北京A区',
					actualDeposit: 100, //实际退回押金
					applyTime: '2024-06-12 13:21:32',
					creator: '大粽子',
					lastUpdatedTime: '2024-06-12 12:25:35',
					lastUpdated: '小明',
				}],
				rentStateFliter: ['未使用', '租借中', '归还中', '已归还'],
				checkboxValue: [], // 选择的待开票
				// loadMoreStatus: 'noMore',
			}
		},
		watch: {
			checkboxValue(newVal, oldVal) {
				if (this.applyData.length == this.checkboxValue.length) {
					this.$emit('isAllChecked', true);
				} else {
					this.$emit('isAllChecked', false);
				}
			},
		},
		methods: {
			scrolltolowerFn() {
				console.log('1221')
			},
			returnMaterials(item) {
				this.$emit('returnMaterials', item);
			},
			checkboxChange(ele) {
				if (ele && ele.detail && ele.detail.value && ele.detail.value.length) {
					let checkboxValue1 = []
					for (var i = 0; i < ele.detail.value.length; i++) {
						checkboxValue1.push(Number(ele.detail.value[i]))
					}
					console.log(ele.detail.value)
					this.$set(this, 'checkboxValue', checkboxValue1)
					this.$emit('checkboxChange', checkboxValue1);
				} else {
					this.$emit('checkboxChange', ele);
				}

				//同步选择结果到父组件
				// let checkboxValue = ele;
				// this.$emit('checkboxChange', checkboxValue);
			},
			// -- 父组件调用，全选或清除所有选项
			checkboxAllSelect(isClean) {
				let that = this;
				console.log(isClean)
				if (isClean) {
					this.checkboxValue = [];
					for (let item of that.applyData) {
						item.checked = false;
					}
				} else {
					this.checkboxValue = [];
					for (let data of this.applyData) {
						this.checkboxValue.push(data.id);
					}
					for (let item of that.applyData) {
						item.checked = true;
					}
					console.log('this.checkboxValue:', this.checkboxValue)
				}
				this.checkboxChange(this.checkboxValue);
			},
		}
	}
</script>

<style lang="scss">
	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.card {
		margin: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		font-size: 29rpx;
	}

	.item-contnet {
		display: flex;
		justify-content: space-between;
		margin: 10rpx 0;

		.content-left {
			color: #9c9c9c;
			/* margin-right: 20rpx; */
		}
	}
	
	.noCommodity {
		margin: 20% 0;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.footer-button {
		margin-top: 20rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		padding-bottom: 20rpx;
	}
</style>